.button {
  display: inline-flex;
  align-items: center;
  height: 55px;
  padding: 0 2rem;
  border: none;
  border-radius: calc(var(--ifm-global-border-radius) / 2);
  font-weight: var(--ifm-font-weight-bold);
  font-size: var(--font-size-normal);
  transition: background-color 100ms var(--transition-bezier);
}

.button:hover {
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background-color: var(--palette-pink);
  color: var(--palette-white);
}

.button--primary:hover {
  color: var(--palette-white);
  background-color: var(--palette-pink-darker);
}

.button--icon img {
  margin-right: 0.5rem;
}

.button--secondary {
  background-color: var(--palette-white);
  color: var(--palette-charade);
}

.button--secondary:hover {
  color: var(--palette-charade);
  background-color: var(--palette-white-darker);
}

.button--tertiary {
  background-color: var(--palette-white-10);
  color: var(--palette-white);
}

.button--tertiary:hover {
  color: var(--palette-white);
  background-color: var(--palette-white-20);
}

.button--small {
  height: 3.5rem;
}

.button--xsmall {
  height: 2.6rem;
  padding: 0 1rem;
}

.button--uppercase {
  text-transform: uppercase;
}

@media (max-width: 996px) {
  .button {
    padding: 0 1.75rem;
  }

  .button--xsmall {
    padding: 0 1rem;
  }
}
